<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-02-23 14:44:09
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-03-09 16:48:43
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="form-openstack"
    :rules="rules"
    :model="form"
    label-width="auto"
    size="medium"
  >
    <el-form-item class="item" label="云服务商" prop="cloudProvider">
      <el-select
        v-model="form.cloudProvider"
        placeholder="请选择云服务商"
        style="width: 100%"
        :disabled="true"
      >
        <el-option
          v-for="item in cloudProviderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item right" label="云账户" prop="cloudAccountName">
      <el-select
        v-model="form.cloudAccountName"
        placeholder="请选择云账户"
        style="width: 100%"
        no-data-text="请先选择合适的云服务商"
        :loading="loadingCloudAccountName"
        :disabled="formType === 2"
      >
        <el-option
          v-for="item in cloudAccountNameOptions"
          :key="item.cloudAccountName"
          :label="item.cloudAccountName"
          :value="item.cloudAccountName"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item" label="卷来源" prop="volumeSource">
      <el-select
        v-model="form.volumeSource"
        placeholder="请选择卷来源"
        style="width: 100%"
        :disabled="formType === 2"
      >
        <el-option
          v-for="item in volumeSourceOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item right" label="组" prop="cpGroupId">
      <el-select
        v-model="form.cpGroupId"
        placeholder="请选择组"
        no-data-text="请先选择合适的云账户"
        style="width: 100%"
        :disabled="formType === 2"
      >
        <el-option
          v-for="item in groupOptions"
          :key="item.cpId"
          :label="item.name"
          :value="item.cpId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="可用域" prop="zone">
      <el-select
        v-model="form.zone"
        placeholder="请选择可用域"
        style="width: 100%"
        no-data-text="请先选择云账户"
        :disabled="formType === 2"
      >
        <el-option
          v-for="item in zoneOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="云盘" prop="type">
      <el-row type="flex" justify="center">
        <el-select
          v-model="form.type"
          placeholder="请选择云盘类型"
          no-data-text="请先选择合适的云账户"
          style="flex: 1; margin-right: 10px"
          :disabled="formType === 2"
        >
          <el-option
            v-for="item in volumeTypeOptions"
            :key="item.cpId"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
        <el-input-number
          v-model="form.size"
          style="flex: 1"
          :min="1"
          :max="1000"
          :precision="0"
          label="大小"
          :disabled="formType === 2"
        />
        <span style="margin-left: 5px">GiB</span>
      </el-row>
    </el-form-item>
    <el-form-item class="item" label="" prop="bootable">
      <el-checkbox v-model="form.bootable">可启动</el-checkbox>
    </el-form-item>
    <el-form-item label="描述" prop="desc">
      <el-input
        v-model="form.desc"
        placeholder="请输入描述"
        type="textarea"
        :rows="3"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import resSelectorMixin from '@/views/mixin/resSelector.js'
import {
  getPrivateZones,
  getBlockVolumeSource,
  getBlockVolumeGoup,
  getBlockVolumeType
} from '@/api/cn-resource'

export default {
  name: 'FormOpenstack',
  components: {},
  mixins: [resSelectorMixin],
  props: {
    cloudSelect: {
      type: String,
      default: 'Openstack'
    },
    formType: {
      type: Number,
      default: 1 // 1-创建 2-编辑
    },
    updateInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      skipGetCloudAccount: false,
      privateUseProvider: true,
      cloudProviderType: 'private',
      volumeSourceOptions: [{
        value: '',
        label: '没有源，空白卷'
      }],
      groupOptions: [],
      zoneOptions: [],
      volumeTypeOptions: [],
      form: {
        cloudProvider: '',
        cloudAccountName: '',
        volumeSource: '',
        cpGroupId: '',
        zone: '',
        type: '',
        size: '1',
        bootable: true,
        desc: ''
      },
      // 校验规则
      rules: {
        cloudProvider: [
          { required: true, message: '请选择云平台', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    formType: {
      handler(newVal) {
        if (newVal === 2) {
          this.skipGetCloudAccount = true
          const updateInfo = JSON.parse(JSON.stringify(this.updateInfo))
          this.form.id = updateInfo.id
          this.form.cloudProvider = updateInfo.cloudProvider
          this.form.cloudAccountName = updateInfo.cloudAccountName
          this.form.volumeSource = updateInfo.volumeSource || ''
          this.form.group = updateInfo.group // 组传递name
          this.getBlockVolumeGoup()
          this.form.zone = updateInfo.zone
          this.form.type = updateInfo.type
          this.form.size = updateInfo.size
          this.form.bootable = updateInfo.bootable
          this.form.desc = updateInfo.desc
        }
      },
      immediate: true
    },
    /**
     * @description: 云账户监听
     * @return {*}
     */
    'form.cloudAccountName': {
      handler(newVal) {
        if (newVal && this.formType === 1) {
          // 创建模式
          // 请求可用域
          this.form.zone = ''
          this.getPrivateZones()
          // 请求卷来源
          // this.form.volumeSource = ''
          // this.getBlockVolumeSource()
          // 请求组
          this.form.cpGroupId = ''
          this.getBlockVolumeGoup()
          // 请求卷类型
          this.form.type = ''
          this.getBlockVolumeType()
        }
      },
      immediate: true
    },
    cloudSelect: {
      handler(newVal) {
        if (newVal && this.formType === 1) {
          this.form.cloudProvider = this.cloudSelect
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 获取卷类型
     * @return {*}
     */
    getBlockVolumeType() {
      getBlockVolumeType({
        cloudAccountName: this.form.cloudAccountName
      }).then((res) => {
        this.volumeTypeOptions = Array.isArray(res.data) ? res.data : []
      })
    },
    /**
     * @description: 获取组
     * @return {*}
     */
    getBlockVolumeGoup() {
      getBlockVolumeGoup({
        cloudAccountName: this.form.cloudAccountName
      }).then((res) => {
        this.groupOptions = Array.isArray(res.data) ? res.data : []
        if (this.formType === 2) {
          const groupFind = this.groupOptions.find(item => {
            return item.name === this.form.group
          })
          this.form.cpGroupId = groupFind ? groupFind.cpId : ''
        }
      })
    },
    /**
     * @description: 获取卷来源
     * @return {*}
     */
    getBlockVolumeSource() {
      getBlockVolumeSource({
        cloudAccountName: this.form.cloudAccountName
      }).then((res) => {
        const arr = Array.isArray(res.data) ? res.data : []
        this.volumeSourceOptions = arr.map((item) => {
          return {
            value: item,
            label: item
          }
        })
      })
    },
    /**
     * @description: 获取私有云可用域
     * @return {*}
     */
    getPrivateZones() {
      getPrivateZones({
        cloudAccountName: this.form.cloudAccountName
      }).then((res) => {
        const zones =
          res.data && Array.isArray(res.data.zones) ? res.data.zones : []
        this.zoneOptions = zones.map((item) => {
          return {
            value: item,
            label: item
          }
        })
      })
    },
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          callback(this.form)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.form-openstack {
  .item {
    display: inline-block;
    width: calc(50% - 10px);
    &.right {
      margin-left: 20px;
    }
  }
}
</style>
